<template>
  <span :class="[type ? `el-font--${type}` : '']">
    <slot></slot>
  </span>
</template>

<script>
export default {
  name: 'ElFont',
  props: {
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>

<style scoped>
/* 绿色 */
.el-font--default {
  margin: 0;
  border-radius: 4px;
  padding: .13rem .5rem;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  color: #42b883;
  background-color: #ecf8ff;
}

/* 黄色 */
.el-font--warning {
  margin: 0;
  border-radius: 4px;
  padding: .13rem .5rem;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  color: #ebba37;
  background-color: #fcf4dc;
}

/* 红色 */
.el-font--danger {
  margin: 0;
  border-radius: 4px;
  padding: .13rem .5rem;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  color: #fe6c6f;
  background-color: #fde4e8;
}

</style>